<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .btn {
            width: 100px;
            height: 50px;
            outline: none;
            border: none;
            background: #495A80;
            color: #fff;
            border-radius: 20px;
        }

        .ripple {
            border-radius: 50%;
            background: rgba(221, 240, 237, 0.253);
            -webkit-transform: scale(0);
            transform: scale(0);
            position: absolute;
            opacity: 1;
        }

        .ripple-act {
            overflow: hidden;
            position: relative;
        }

        .rippleAct {
            -webkit-animation: rippleAct 2s linear;
            animation: rippleAct 2s linear;
        }

        @keyframes rippleAct {
            100% {
                -webkit-transform: scale(2);
                transform: scale(2);
                opacity: 0;
            }
        }
    </style>
</head>

<body>

    <button class="btn ripple-act" type="button">点击</button>

    <script>
        /* 
         * 1 鼠标点击的坐标
         * 2 点击后在生成一个元素
         * 3 给该元素增加动画
         * 4 动画结束后删除元素
         */

        var ripple = function (event, self) {
            // 1 获取鼠标点击的坐标
            var x = event.pageX || document.documentElement.scrollLeft + document.body.scrollLeft + event.clientX;
            var y = event.pageY || document.documentElement.scrollTop + document.body.scrollTop + event.clientY;
            var wx = self.offsetWidth;

            x = x - self.offsetLeft - wx / 2; // 获取偏移量
            y = y - self.offsetTop - wx / 2;

            var rippleDom = document.createElement("span");
            rippleDom.className = 'ripple';
            var firstChild = self.firstChild;
            if (firstChild) {
                self.insertBefore(rippleDom, firstChild);
            } else {
                self.appendChild(rippleDom);
            };

            rippleDom.style.cssText = 'width: ' + wx + 'px;height: ' + wx + 'px;top: ' + y + 'px; left: ' + x + 'px';
            rippleDom.classList.add('rippleAct');

            //监听动画结束，删除波纹元素
            animationEnd(rippleDom, function () {
                this.parentNode.removeChild(rippleDom);
            });

        }
        var animationEnd = function (elem, handler) {
            elem.addEventListener('animationend', handler, false);
            elem.addEventListener('webkitAnimationEnd', handler, false);
            elem.addEventListener('mozAnimationEnd', handler, false);
            elem.addEventListener('OAnimationEnd', handler, false);
        };
        var rippleBtns = document.querySelectorAll(".ripple-act");

        for (let i = 0; i < rippleBtns.length; i++) {
            const element = rippleBtns[i];
            element.addEventListener("click", function (e) {
                console.log(e.pageX, e.pageY);
                ripple(e, this);
            })
        }

    </script>
</body>

</html>